import { Modal, ModalProps, Input, Button, DatePicker } from 'antd';
import { RangePickerProps } from 'antd/es/date-picker';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';

const { TextArea } = Input;

interface Props extends ModalProps {
  onConfirm?: (dateString: string) => void;
  placeholder?: string;
  defaultDate?: string;
}

const ChangeExpiredTimeModal = ({ open, defaultDate, onConfirm, onCancel, ...props }: Props) => {
  const [dateString, setDateString] = useState('');
  const onDateChange = (dateString: string | string[]) => {
    if (!Array.isArray(dateString)) {
      setDateString(dateString);
    }
  };

  const onConfirmClicked = () => {
    if (dateString) {
      onConfirm?.(dateString);
    }
  };

  const disabledDate: RangePickerProps['disabledDate'] = (current) => {
    return current && current < dayjs(defaultDate).endOf('day');
  };

  useEffect(() => {
    const date = dayjs(defaultDate);
    setDateString(date.format('YYYY-MM-DD HH:mm:ss') ?? '');
  }, [defaultDate]);

  useEffect(() => {
    if (!open) {
    }
  }, [open]);

  return (
    <Modal
      destroyOnClose={true}
      maskClosable={false}
      onCancel={onCancel}
      open={open}
      {...props}
      footer={null}
    >
      <div className="m-2 text-center text-lg font-bold">{'修改过期时间'}</div>
      <div className="mb-2">
        <DatePicker
          className="w-full"
          value={dateString ? dayjs(dateString) : dayjs()}
          disabledDate={disabledDate}
          onChange={(_, dataString) => {
            onDateChange(`${dataString} 23:59:59`);
          }}
          allowClear={false}
          placeholder="请选择过期时间"
          // showTime
        />
      </div>
      <div></div>
      <div className="mt-4 flex items-center justify-center gap-10">
        <Button onClick={onCancel}>取消</Button>
        <Button type="primary" onClick={onConfirmClicked}>
          确认
        </Button>
      </div>
    </Modal>
  );
};

export default ChangeExpiredTimeModal;
